import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12

Rectangle {
    id: rectangle
    height: parent.height * 3 / 3
    anchors.fill: parent
    gradient: Gradient {
        GradientStop {
            position: 0
            color: "#640abe"
        }

        GradientStop {
            position: 1
            color: "#000000"
        }
    }
    ListModel {
        id: appModel
        ListElement {
            icon: "../../icons/sparrow.png"
            cameraIndex: 1
        }
        ListElement {
            icon: "../../icons/sparrow.png"
            cameraIndex: 2
        }
        ListElement {
            icon: "../../icons/sparrow.png"
            cameraIndex: 3
        }
//        ListElement {
//            name: "Calendar"
//            icon: "../../icons/sparrow.png"
//        }
//        ListElement {
//            name: "Messaging"
//            icon: "../../icons/sparrow.png"
//        }
//        ListElement {
//            name: "Todo List"
//            icon: "../../icons/sparrow.png"
//        }
    }
    GridView {
        id: grid
        anchors.fill: parent
        cellWidth: rectangle.width / 3
        cellHeight: rectangle.height / 2
        focus: true
        model: appModel

        delegate: Item {
            width: rectangle.width / 3
            height: rectangle.height / 2

            Image {
                id: image
                y: 20
                fillMode: Image.PreserveAspectFit
                anchors.fill: parent
                source: icon
                cache: false
                Connections {
                    target: {
                        switch(cameraIndex) {
                            case 1: return camera_1
                            case 2: return camera_2
                            case 3: return camera_3
                        }
                    }
                    onCallQmlRefreshImg: {
                        image.source = ""
                        switch(cameraIndex) {
                            case 1:  image.source = "image://" + camera_1.cameraName
                                break;
                            case 2:  image.source = "image://" + camera_2.cameraName
                                break;
                            case 3:  image.source = "image://" + camera_3.cameraName
                                break;
                        }
                    }
                }

                Rectangle {
                    color: "springgreen"
                    opacity: 0.8
                    x: (image.width - image.paintedWidth)/2
                    y: image.height/2
                    width: image.paintedWidth
                    height: 1
                }
                Rectangle {
                    color: "springgreen"
                    opacity: 0.8
                    x: image.width/2
                    y: (image.height - image.paintedHeight)/2
                    width: 1
                    height: image.paintedHeight
                }
            }


            RowLayout {
                Button {
                    display: AbstractButton.IconOnly
                    icon.color: "springgreen"
                    icon.source: "../../icons/save.png"
                    onClicked: {
                        switch(cameraIndex) {
                            case 1: return camera_1.scSaveImage()
                            case 2: return camera_2.scSaveImage()
                            case 3: return camera_3.scSaveImage()
                        }
                    }
                }
                Text {
                    anchors {
                        top: image.top
                    }
                    text: {
                        switch(cameraIndex) {
                            case 1:  return camera_1.cameraName
                            case 2:  return camera_2.cameraName
                            case 3:  return camera_3.cameraName
                        }
                    }

                    color: "springgreen"
                    font.family: "Helvetica"
                }
            }


//            MouseArea {
//                anchors.fill: parent
//                onClicked: parent.GridView.view.currentIndex = index
//            }
        }
    }
}
